<template>
  <div class="app-container">
    <div class="head">
      <div class="headinput">
        <i>项目名称:</i>
        <el-input
          placeholder="请输入项目名称"
          v-model="tempname.label"
          size="small"
          clearable
        >
        </el-input>

        <el-button
          type="primary"
          style="margin-left: 3px"
          plain
          icon="el-icon-search"
          size="small"
          class="select1"
          @click="careOrderQuery"
          >查询</el-button
        >
      </div>
    </div>

    <el-table :data="list" style="width: 100%">
      <el-table-column label="处方ID" align="center" prop="id" />
      <!-- <el-table-column label="医院id" align="center" prop="hospitalId" /> -->
      <!-- <el-table-column label="医生id" align="center" prop="doctorId" />
      <el-table-column label="患者id" align="center" prop="patientId" /> -->
      <el-table-column
        label="关联病历ID"
        width="130"
        align="center"
        prop="careHistoryId"
      />
      <!-- <el-table-column label="收费总表id" align="center" prop="pkgId" /> -->
      <el-table-column label="状态" align="center" prop="status" />
      <el-table-column label="处方名" align="center" prop="label" />
      <el-table-column label="每~天" align="center" prop="numA" />
      <el-table-column label="服用~剂" align="center" prop="numB" />
      <el-table-column label="服用~天" align="center" prop="numC" />
      <el-table-column label="共~剂" align="center" prop="numD" />
      <el-table-column
        label="单处方金额"
        width="130"
        align="center"
        prop="amount"
      />
      <el-table-column label="处方全额" align="center" prop="allAmount" />
      <el-table-column label="诊断编号" align="center" prop="caseCode" />
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[8,10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { DzmHisCareOrderList } from "@/api/dzmorder";

export default {
  // visit
  name: "visit",
  data() {
    return {
      // 分页后的当前页数据
      list: [],
      //当前数据页的第几页
      currentPage: 1,
      // 总数据条数
      total: 0,
      // 每页显示多少行数据,默认为10条
      pagesize: 8,
      // 代表是从后端获取的所有数据
      ticket: [],
      open: false,
      form: "",
      title: "",
      single: true,
      multiple: true,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 显示搜索条件
      showSearch: true,
      tempname: {
        lable: "",
      },
    };
  },
  created() {
    this.getDoctors();
  },
  methods: {
    /** 用于查询就诊李列表 */
    getDoctors() {
      //this.listLoading = true;
      DzmHisCareOrderList().then((response) => {
        console.log(response.data[0]);
        if (response.code === 200) {
          this.ticket = response.data;
          //获取返回数据的总行数
          this.total = response.data.length;
          // 获取当前页的数据,此方法在下方定义
          this.getDoctorInfo();
          this.$message({
            message: "数据加载成功",
            type: "success",
          });
        } else {
          // 失败提示信息
          this.$$message({
            message: "数据加载错误",
            type: "error",
          });
        }
      });
    },
    careOrderQuery() {
      DzmHisCareOrderList(this.tempname).then((response) => {
        console.log(this.tempname);
        if (response.code === 200) {
          this.ticket = response.data;
          //获取返回数据的总行数
          this.total = response.data.length;
          // 获取当前页的数据,此方法在下方定义
          this.getDoctorInfo();
          this.$message({
            message: "数据加载成功",
            type: "success",
          });
        } else {
          // 失败提示信息
          this.$$message({
            message: "数据加载错误",
            type: "error",
          });
        }
      });
    },
    // 此方法用来获取当前页的数据
    getDoctorInfo() {
      // 清空表格的list 数据
      this.list = [];
      // 获取当前页的数据
      for (
        let i = (this.currentPage - 1) * this.pagesize;
        i < this.total;
        i++
      ) {
        // 将便利的数据添加到 list 里面
        this.list.push(this.ticket[i]);
        // 判断是否达到每一页的要求
        if (this.list.length === this.pagesize) break;
      }
    },
    // 分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      // 修改当前每页的数据行数
      this.pagesize = size;
      // 数据重新分页
      this.getDoctorInfo();
    },
    // 调整当前的页码
    handleCurrentChange(pageNumber) {
      // 修改当前的页码
      this.currentPage = pageNumber;
      //数据重新分页
      this.getDoctorInfo();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
}

.app-container .head {
  margin: 0 auto;
  margin-top: 25px;
  width: 95%;
  height: 50px;
  background-color: white;
  box-shadow: 0 0 5px 1px #eeedf2;
}

.app-container .head .el-input {
  //  line-height: 20px;
  margin-top: 10px;
  //  size: 10;
  width: 15%;
}

.app-container .head i {
  margin-right: 10px;
  margin-left: 10px;
  font-style: normal;
}

.app-container .head .select1 {
  margin-top: 10px;
  margin-left: 20px;
}

.app-container .head .add {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

.app-container .el-table {
  margin-top: 20px;
}
</style>>